<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #statistics {
            padding: 20px;
        }

        .statistics_div1 {
            width: 100%;
            /* height: 50px; */
            border-radius: 10px;
            border: 2px solid #ccc;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
        }

        .statistics_div2 {
            width: 100%;
            /* height: 50px; */
            border-radius: 10px;
            border: 2px solid #ccc;
            margin-bottom: 15px;
        }

        .statistics_div3 {
            width: 100%;
            /* height: 50px; */
            border-radius: 10px;
            border: 2px solid #ccc;
            margin-bottom: 15px;
        }

        .statistics_div {
            width: 48%;
            /* height: 20px; */
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 10px;
        }

        .statistics_div_flex {

            display: flex;
            justify-content: space-between;


        }

        .select_div {
            padding: 10px;
        }

        #fruits {
            border: 0;
        }

        .middle-section {
            padding: 30px;
        }

        table {
            width: 100%;
            border-collapse: collapse;

        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }

        .statistics_div4 {
            width: 100%;
            /* height: 50px; */
            border-radius: 10px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
        }

        .statistics_div_flex_zi {}

        .statistics_div_flex_select {}

        .statistics_div5 {
            width: 100%;
            /* height: 50px; */
            border-radius: 10px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
        }

        .statistics_div1_qi {
            /* width: 50%; */
            /* border: 1px solid #ccc; */
            margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-around;

        }

        .statistics_div1_qi_div {
            position: absolute;
            bottom: 50px;
            text-align: center;
            color: #ffffff;
            min-width: -webkit-fill-available;
        }

        .statistics_div2_select {
            float: right;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div id="statistics">
        <div class="statistics_div1">
            <div style="margin-top: 10px;margin-left: 10px;">
                <select id="fruits" name="fruits">
                    <option value="apple">2024年</option>
                    <option value="orange">2025年</option>
                    <option value="banana">2023年</option>
                    <option value="grape">2027年</option>
                </select>
                <select id="fruits" name="fruits">
                    <option value="apple">1月</option>
                    <option value="orange">2月</option>
                    <option value="banana">3月</option>
                    <option value="grape">4月</option>
                </select>
            </div>
            <div class="statistics_div1_qi">
                <div class="" style="position: relative;">
                    <div>
                        <img src="./image/statistics1.png" alt="">
                    </div>
                    <div class="statistics_div1_qi_div">
                        <div>总收入</div>
                        <div>365200</div>
                    </div>
                </div>
                <div class="" style="position: relative;">
                    <div>
                        <img src="./image/statistics2.png" alt="">
                    </div>
                    <div class="statistics_div1_qi_div">
                        <div>新签</div>
                        <div>100</div>
                    </div>
                </div>
                <div class="" style="position: relative;">
                    <div>
                        <img src="./image/statistics3.png" alt="">
                    </div>
                    <div class="statistics_div1_qi_div">
                        <div>续费</div>
                        <div>1000</div>
                    </div>
                </div>
                <div class="" style="position: relative;">
                    <div>
                        <img src="./image/statistics4.png" alt="">
                    </div>
                    <div class="statistics_div1_qi_div">
                        <div>餐费</div>
                        <div>200</div>
                    </div>
                </div>
                <div class="" style="position: relative;">
                    <div>
                        <img src="./image/statistics5.png" alt="">
                    </div>
                    <div class="statistics_div1_qi_div">
                        <div>待续费</div>
                        <div>20000</div>
                    </div>
                </div>
                <div class="" style="position: relative;">
                    <div>
                        <img src="./image/statistics6.png" alt="">
                    </div>
                    <div class="statistics_div1_qi_div">
                        <div>退费</div>
                        <div>3000</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="statistics_div2">
            <div class="statistics_div2_select">
                <select id="fruits" name="fruits">
                    <option value="apple">2024年</option>
                    <option value="orange">2025年</option>
                    <option value="banana">2023年</option>
                    <option value="grape">2027年</option>
                </select>
                <select id="fruits" name="fruits">
                    <option value="apple">1月</option>
                    <option value="orange">2月</option>
                    <option value="banana">3月</option>
                    <option value="grape">4月</option>
                </select>
                <select id="fruits" name="fruits">
                    <option value="apple">新签 </option>
                </select>
            </div>
            <div id="main_title" style="width: 100%;height:200px;"></div>
        </div>
        <div class="statistics_div3">
            <div class="select_div">
                <select id="fruits" name="fruits">
                    <option value="apple">2024年</option>
                    <option value="orange">2025年</option>
                    <option value="banana">2023年</option>
                    <option value="grape">2027年</option>
                </select>
                <select id="fruits" name="fruits">
                    <option value="apple">1月</option>
                    <option value="orange">2月</option>
                    <option value="banana">3月</option>
                    <option value="grape">4月</option>
                </select>
            </div>
            <div class="middle-section">
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>校区名</th>
                            <th>业绩(不含退款)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>A校区</td>
                            <td>100</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>B校区</td>
                            <td>100</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>C校区</td>
                            <td>100</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>D校区</td>
                            <td>100</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="statistics_div4">
            <div class="statistics_div">
                <div class="statistics_div_flex">
                    <div class="statistics_div_flex_zi">学员占比分析</div>
                    <div class="statistics_div_flex_select">
                        <select id="fruits" name="fruits">
                            <option value="apple">2024年</option>
                            <option value="orange">2025年</option>
                            <option value="banana">2023年</option>
                            <option value="grape">2027年</option>
                        </select>
                        <select id="fruits" name="fruits">
                            <option value="apple">1月</option>
                            <option value="orange">2月</option>
                            <option value="banana">3月</option>
                            <option value="grape">4月</option>
                        </select>
                        <select id="fruits" name="fruits">
                            <option value="apple">1月</option>
                            <option value="orange">2月</option>
                            <option value="banana">3月</option>
                            <option value="grape">4月</option>
                        </select>
                    </div>
                </div>
                <div style="text-align: -webkit-center;">
                    <div id="main_student" style="width: 600px;height:400px;text-align: center;"></div>
                </div>

            </div>
            <div class="statistics_div">
                <div class="statistics_div_flex">
                    <div class="statistics_div_flex_zi">课程报读分析</div>
                    <div class="statistics_div_flex_select">
                        <select id="fruits" name="fruits">
                            <option value="apple">2024年</option>
                            <option value="orange">2025年</option>
                            <option value="banana">2023年</option>
                            <option value="grape">2027年</option>
                        </select>
                        <select id="fruits" name="fruits">
                            <option value="apple">1月</option>
                            <option value="orange">2月</option>
                            <option value="banana">3月</option>
                            <option value="grape">4月</option>
                        </select>
                        <select id="fruits" name="fruits">
                            <option value="apple">1月</option>
                            <option value="orange">2月</option>
                            <option value="banana">3月</option>
                            <option value="grape">4月</option>
                        </select>
                    </div>

                </div>
                <div style="text-align: -webkit-center;">
                    <div id="main_curriculum" style="width: 600px;height:400px;"></div>
                </div>
            </div>
        </div>
        <div class="statistics_div5">

            <div class="statistics_div">
                <div class="statistics_div_flex">
                    <div class="statistics_div_flex_zi">数据意向分析</div>
                    <div class="statistics_div_flex_select">
                        <select id="fruits" name="fruits">
                            <option value="apple">2024年</option>
                            <option value="orange">2025年</option>
                            <option value="banana">2023年</option>
                            <option value="grape">2027年</option>
                        </select>
                        <select id="fruits" name="fruits">
                            <option value="apple">1月</option>
                            <option value="orange">2月</option>
                            <option value="banana">3月</option>
                            <option value="grape">4月</option>
                        </select>
                    </div>
                </div>
                <div style="text-align: -webkit-center;">
                    <div id="main_analysis" style="width: 600px;height:400px;"></div>
                </div>
            </div>
            <div class="statistics_div">
                <div class="statistics_div_flex">
                    <div class="statistics_div_flex_zi">数据状态占比分析</div>
                    <div class="statistics_div_flex_select">
                        <select id="fruits" name="fruits">
                            <option value="apple">2024年</option>
                            <option value="orange">2025年</option>
                            <option value="banana">2023年</option>
                            <option value="grape">2027年</option>
                        </select>
                        <select id="fruits" name="fruits">
                            <option value="apple">1月</option>
                            <option value="orange">2月</option>
                            <option value="banana">3月</option>
                            <option value="grape">4月</option>
                        </select>
                    </div>

                </div>
                <div style="text-align: -webkit-center;">
                    <div id="main_proportion" style="width: 600px;height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/echarts.min.js"></script>
    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/scriptZIP/index.umd.min.js"></script>
    <script src="/scriptZIP/flatpickr.min.js"></script>

    <script src="/lib/vue-flatpickr.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        new Vue ({
            el:'#app',
            data:{
                return:{

                }
            },
            methods:{

            },
            mounted(){
                
            }
        })

        // 标题
        var chartDom = document.getElementById('main_title');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '标题',
                left: '10px'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['午托', '晚托', '好成托', '新概念口语', '体验课','智习营','餐费','暑假','寒假']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '午托',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90]
                },
                {
                    name: '晚托 ',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290]
                },
                {
                    name: '好成托',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190]
                },
                {
                    name: '新概念口语',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320, 820, 932, 901, 934, 1290]
                },
                {
                    name: '体验课',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290]
                },
                {
                    name: '智习营',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290]
                },
                {
                    name: '餐费',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290]
                },
                {
                    name: '暑假',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290]
                },
                {
                    name: '寒假',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290]
                }

            ]
        };

        option && myChart.setOption(option);


        // 学员占比分析
        var chartDom = document.getElementById('main_student');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '在读人数' },
                        { value: 735, name: '过期人数' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
        // 课程报读分析
        var chartDom = document.getElementById('main_curriculum');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '语文' },
                        { value: 735, name: '英语' },
                        { value: 735, name: '数学' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
        //数据意向分析
        var chartDom = document.getElementById('main_analysis');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '老师' },
                        { value: 735, name: ' 学生' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
        // 数据状态占比分析
        var chartDom = document.getElementById('main_proportion');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '老师' },
                        { value: 735, name: '学生' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
        window.addEventListener('resize',function(){
            option.resize();
        })
    </script>
</body>

</html>